<script setup lang="ts">
import { Message, NativeScroll, Notice } from "cax-ui";
import { useSolverStore } from "@/UI/store/solverStore";
import { storeToRefs } from "pinia";

import { getTaskDetail } from "@/UI/api/solver";

const solverStore = useSolverStore();
const { solverTaskList } = storeToRefs(solverStore);

function getTaskInfo(taskId: number) {
  getTaskDetail(taskId).then((res) => {
    solverStore.solverTaskDetail = res.data;
    Notice.info({
      title: "任务详情",
      content: res.data,
      duration: 0,
      closable: true,
    });
  });
}

function handleClick(index: number) {
  const list = [...solverTaskList.value];
  list.forEach((item, idx) => {
    item.isActive = idx === index;
  });
  solverStore.updateSolverTaskList(list);
  getTaskInfo(list[index].taskId);
}
</script>

<template>
  <div class="solver-task-list">
    <div class="header">
      <span class="attr-1">名称</span>
      <span class="line"></span>
      <span class="attr-2">ID</span>
    </div>
    <NativeScroll :height="160">
      <div
        :class="item.isActive ? 'active-item' : 'item'"
        v-for="(item, index) in solverTaskList"
        :key="item.taskId"
        @click="handleClick(index)"
      >
        <img src="../../assets/solver_task_item.svg" />
        <span class="task-name"> {{ item.taskName }} </span>
        <span class="task-id"> {{ item.taskId }} </span>
      </div>
    </NativeScroll>
  </div>
</template>

<style scoped lang="less">
.solver-task-list {
  .header {
    display: flex;
    align-items: center;
    height: 34px;
    background: #f9fbfc;
    font-size: 14px;
    padding: 0px 16px;
    gap: 6px;
    align-self: stretch;
    color: #4c5a67;
    .attr-1 {
      width: 80%;
    }
    .attr-2 {
      width: 40%;
    }
    .line {
      width: 1px;
      height: 16px;
      background: #eaecef;
    }
  }
  .item {
    img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    span {
      font-size: 14px;
      font-weight: 500;
    }

    display: flex;
    align-items: center;
    padding: 0 10px;
    margin: 10px 0;
    border-radius: 5px;
    cursor: pointer;
    height: 34px;

    &:hover {
      background: #e8f8ff;
    }

    .task-name {
      width: 60%;
    }
  }
  .active-item {
    .item();
    background-color: #e8f8ff;
  }
}
</style>
